<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/person_center/person_center.css">
    <title>会员中心-积分订单</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <div class="header_tit fl"></div>
            <searchs></searchs>

            <car_box></car_box>

        </div>
        <div class="wrap person_center">
            <!-- nav -->
            <div class="nav_box fl">
                <div id="subapp" v-cloak>
                    <div class="person_nav fl">
                        <ul>
                            <li @click='person_order'>首页</li>
                            <li @click='person_center'>我的订单</li>
                            <li @click='person_address'>收货地址</li>
                            <li @click='person_exchange_page'>积分换货</li>
                            <li class="active">积分订单</li>
                            <li @click='person_collection'>我的收藏</li>
                            <li @click='person_foot'>浏览足迹</li>
                            <li @click='person_ticket'>优惠券</li>
                            <li @click='person_info'>个人设置</li>
                            <li @click='person_message'>消息中心</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="right_box fl">
                <div class="person_integral_order">
                    <div class="all_exchange">
                        <ul class="fl">
                            <!-- <li>全部订单</li> -->
                            <li>积分订单</li>
                        </ul>
                        <el-dropdown class="time_order fr cursor" trigger="click"  @command="handleCommand">
                            <span class="el-dropdown-link">
                                {{command_text}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command = 0 command_text='全部'>全部</el-dropdown-item>
                                <el-dropdown-item command = 1 command_text='近三个月'>近三个月</el-dropdown-item>
                                <!-- <el-dropdown-item command = 2 command_text='近二个月'>近二个月</el-dropdown-item> -->
                            </el-dropdown-menu>
                        </el-dropdown>
                        <!-- <div class="time_order fr">近三个月订单 <img src="../images/icon_down.png" alt=""></div> -->
                    </div>

                    <div class="my_order_tit">
                        <div class="order_product">
                            商品
                        </div>
                        <div class="order_money">
                            订单号
                        </div>
                        <div class="order_money">
                            商品操作
                        </div>
                        <div class="order_money">
                            积分
                        </div>
                        <div class="order_money">
                            交易状态
                        </div>
                        <div class="order_money">
                            交易操作
                        </div>
                    </div>
                    <div class="all_list">
                        <div class="integral_order_item" v-for='(item,index) in order_list' v-if='item.spOrderDetailList!=""'>
                            <div class="item_detail cursor" v-for='(items,index) in item.spOrderDetailList' >
                                <div class="mtop">
                                    <div class="order_product fl">
                                        <div class="detail_img fl" @click='intergral_detail(item.id)'>
                                            <img :src="items.goodsImage" alt="">
                                        </div>
                                        <div class="detail_tit fl">{{items.goodsName}}</div>
                                    </div>
                                    <div class="order_money fl">
                                        {{item.orderCode}}
                                    </div>
                                    <div class="order_money fl">
                                        <p @click='exchange(items.goodsId,items.orderId)' v-if='item.orderStatus==3'>换货</p>
                                        <!-- <p>投诉</p> -->
                                    </div>
                                    <div class="order_money fl">
                                        <p class="red_color">{{items.goodsPrice}}</p>
                                    </div>
                                    <div class="order_money fl">
                                        <p class="red_color" v-if='item.orderStatus==1'>已付款</p>
                                        <p class="red_color" v-else-if='item.orderStatus==2'>已发货</p>
                                        <p class="red_color" v-else-if='item.orderStatus==3'>已签收</p>
                                        <p class="red_color" v-else='item.orderStatus==4'>换货申请</p>
                                        <p @click='intergral_detail(item.id)'>订单详情</p>
                                        <!-- <p class="blue_color" >物流明细</p> -->
                                    </div>
                                    <div class="order_money fl">
                                        <p class="pay_btn cursor"  v-if='item.orderStatus==2' @click='confirmReceivedGoods(item.spOrderLogisticsList[0].id)'>确认收货</p>
                                        <p class="cursor"  v-if='item.orderStatus==3||item.orderStatus==6||item.orderStatus==7||item.orderStatus==8' @click='deleteSpOrderById(item.spOrderLogisticsList[0].orderId)'>删除</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="integral_page">
                            <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"   :page-size='10' :total="total" class="page_list">
                            </el-pagination>
                        </div>
                    </div>

                </div>
            </div>

        </div>





       <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>
     
    <script src="../js/axios.js"></script>         <script src="../js/qs.js"></script>
    <script src="../js/swiper-4.3.5.min.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    input10:'',
                    input11:'',
                    car_active:false,
                    groups:3,
                    add_popup:false,
                    order_list:'',
                    spOrderDetailList:'',
                    timeType:0,
                    command_text:'全部',
                    total:0,
                };
            },
            created() {
                
            },
            mounted() {
                this.order_lists(1)
            },
            methods: {
                
                // 分页
                handleCurrentChange(page) {
                    app.order_lists(page)
                }, //改变条数触发
                // 订单列表
                order_lists(page){
                    axios({
                        method:"POST",
                        url:base_url + "/spOrder/listMemberUser",
                        data:Qs.stringify({
                            timeType:this.timeType,
                            // pageNum:page,
                            // pageSize:10,
                            sortField:0
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.order_list = res.data.data.list.list
                        app.total = res.data.data.list.total
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                handleCommand(command) {
                    app.timeType = command
                    if (command==0) {
                        app.command_text ='全部'
                    }else if(command==1){
                        app.command_text ='近三个月'
                    }else if(command==2){
                        app.command_text ='近二个月'
                    }
                    app.order_lists()
                },
                // 删除订单
                deleteSpOrderById(id){
                    axios({
                        method:"POST",
                        url:base_url + "/spOrder/deleteSpOrderById",
                        data:Qs.stringify({
                            id:id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        console.log(res)
                        app.order_lists()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 确认收货
                confirmReceivedGoods(id){
                    axios({
                        method:"POST",
                        url:base_url + "/spOrder/confirmReceivedGoods",
                        data:Qs.stringify({
                            logisticsId:id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        console.log(res)
                        app.order_lists()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                exchange(orderId,goodsId){
                    window.location.href='person_exchange.html?goodsId='+orderId + '&orderId='+ goodsId
                },
                // 显示购物车               
                go_shop_car(){                     
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                person_order(){
                    window.location.href='person_order.html'
                },
                person_address(){
                    window.location.href='person_address.html'
                },
                person_exchange_page(){
                    window.location.href='person_exchange_page.html'
                },
                person_center(){
                    window.location.href='person_center.html?index='+0
                },
                person_collection(){
                    window.location.href='person_collection.html'
                },
                person_foot(){
                    window.location.href='person_footprint.html'
                },
                person_info(){
                    window.location.href='person_info.html'
                },
                person_message(){
                    window.location.href='person_message.html'
                },
                person_ticket(){
                    window.location.href='person_ticket.html'
                },
                intergral_detail(id){
                    console.log(id)
                    window.location.href='person_integral_detail.html?id='+id
                }
            }
        })
        
    </script>
</body>

</html>